<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Gappa is a bootstrap minimal & clean admin template">
    <meta name="keywords"
          content="chat, chat platform, discussion, video call, voice call, communication, conversation, messange, messanger, talk">
    <meta name="author" content="Themesbox">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>Gappa - Clean & Minimal Chat Platform HTML Template</title>
    <!-- Fevicon -->
    <link rel="shortcut icon" href="../static/images/favicon.ico">
    <!-- Start css -->
    <!-- Slick css -->
    <link href="../static/plugins/slick/slick.css" rel="stylesheet">
    <link href="../static/plugins/slick/slick-theme.css" rel="stylesheet">
    <link href="../static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="../static/css/icons.css" rel="stylesheet" type="text/css">
    <link href="../static/css/flag-icon.min.css" rel="stylesheet" type="text/css">
    <link href="../static/css/style.css" rel="stylesheet" type="text/css">
    <!-- End css -->
</head>
<body class="light-layout">
<!-- Start Create Group Modal -->
<div class="modal create-group-modal fade" id="createGroup" tabindex="-1" role="dialog"
     aria-labelledby="createGroupTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createGroupTitle">Create Group</h5>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <input type="text" class="form-control" id="groupName" placeholder="Enter Group Name">
                    </div>
                    <div class="form-group">
                        <textarea class="form-control" name="groupDesc" id="groupDesc" rows="3"
                                  placeholder="Enter Group Description"></textarea>
                    </div>
                    <p class="create-group-header">Add Users</p>
                    <div class="added-users">
                        <div class="avatar-group">
                            <div class="avatar" id="avatar-plus">
                                <a href="#" data-toggle="tooltip" data-placement="top" title=""
                                   data-original-title="Add New User">
                                    <img src="../static/images/plus.svg" alt="avatar" class="rounded-circle">
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="add-users-search">
                        <div class="input-group">
                            <input type="search" class="form-control" placeholder="Search" aria-label="Search"
                                   aria-describedby="add-users-search-btn">
                            <div class="input-group-append">
                                <button class="btn" type="submit" id="add-users-search-btn"><i
                                        class="feather icon-search"></i></button>
                            </div>
                        </div>
                    </div>
                    <div class="add-users-list">
                        <ul class="list-unstyled">
                            <li th:each="chatItem:${chatItemList}" class="media" th:if="${!chatItem.isGroupChat()}" >
                                <img class="align-self-center rounded-circle" th:src="${chatItem.getIcon()}"
                                     alt="Generic placeholder image">
                                <div class="media-body">
                                    <h5><span th:text="${chatItem.getName()}">Emily Cook</span></h5>
                                    <p th:text="${chatItem.getDescription()}"></p>
                                </div>
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" th:id="'userAdd-'+${chatItem.getId()}">
                                    <label onclick="clickCheckBox(this)" class="custom-control-label"
                                           th:for="'userAdd-'+${chatItem.getId()}"
                                           th:attr="checkId=${chatItem.getId()},isChecked=0,icon=${chatItem.getIcon()}
                                           ,username=${chatItem.getName()}" ></label>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="mt-3 text-center">
                        <button type="button" onclick="createGroup()" class="btn btn-primary"><i class="feather icon-plus mr-2"></i>Create Group
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- End Incoming Video Call Modal -->
<!-- Start Incoming Video Call Modal -->
<div class="modal incoming-video-modal fade" id="incomingVideoCall" tabindex="-1" role="dialog"
     aria-labelledby="incomingVideoCallTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-white" id="incomingVideoCallTitle">Incoming Video Call</h5>
            </div>
            <div class="modal-body">
                <img src="../static/images/girl.svg" alt="avatar" class="rounded-circle">
                <h5 class="text-white">Jessica Meir</h5>
                <p class="text-white">Texas, USA</p>
                <button type="button" class="btn btn-success mr-3"><i class="feather icon-check mr-2"></i>Accept
                </button>
                <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="feather icon-x mr-2"></i>Reject
                </button>
            </div>
        </div>
    </div>
</div>
<!-- End Incoming Video Call Modal -->
<!-- Start Incoming Voice Call Modal -->
<div class="modal incoming-voice-modal fade" id="incomingVoiceCall" tabindex="-1" role="dialog"
     aria-labelledby="incomingVoiceCallTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="incomingVoiceCallTitle">Incoming Voice Call</h5>
            </div>
            <div class="modal-body">
                <img src="../static/images/men.svg" alt="avatar" class="rounded-circle">
                <h5>Jessica Meir</h5>
                <p>Texas, USA</p>
                <button type="button" class="btn btn-success mr-3"><i class="feather icon-check mr-2"></i>Accept
                </button>
                <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="feather icon-x mr-2"></i>Reject
                </button>
            </div>
        </div>
    </div>
</div>
<!-- End Incoming Voice Call Modal -->
<!-- Start Error Screen Modal -->
<div class="modal error-screen-modal fade" id="errorScreen" tabindex="-1" role="dialog"
     aria-labelledby="errorScreenTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="errorScreenTitle">Connection Error</h5>
            </div>
            <div class="modal-body">
                <img src="../static/images/connection_error.svg" class="img-fluid" alt="connection_error">
                <h5>Computer not Connected</h5>
                <p>Please, check internet connection this PC.</p>
                <button type="button" class="btn btn-info"><i class="feather icon-repeat mr-2"></i>Try Again</button>
            </div>
        </div>
    </div>
</div>
<!-- End Incoming Voice Call Modal -->
<!-- Start Chat Layout -->
<div class="chat-layout">
    <!-- Start Chat Leftbar -->
    <div class="chat-leftbar">
        <div class="tab-content" id="pills-tab-justifiedContent">
            <!-- Start Chat Listbar -->
            <div class="tab-pane fade show active" id="pills-chat-justified" role="tabpanel"
                 aria-labelledby="pills-chat-tab-justified">
                <div class="chat-listbar">
                    <div class="chat-left-headbar">
                        <div class="row align-items-center">
                            <div class="col-9">
                                <ul class="list-unstyled mb-0">
                                    <li class="media">
                                        <img class="align-self-center mr-2" src="../static/images/logo.svg"
                                             alt="Generic placeholder image">
                                        <div class="media-body">
                                            <h5 class="mb-0 mt-2">Chat</h5>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-3">
                                <a href="/logout" data-toggle="tooltip" data-placement="right" title="Logout"><i
                                        class="feather icon-log-out"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="chat-left-search">
                        <form>
                            <div class="input-group">
                                <input type="search" class="form-control" placeholder="Search" aria-label="Search"
                                       aria-describedby="chat-left-search-btn">
                                <div class="input-group-append">
                                    <button class="btn" type="submit" id="chat-left-search-btn"><i
                                            class="feather icon-search"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="chat-left-body">
                        <div class="nav flex-column nav-pills chat-userlist" id="chat-list-tab" role="tablist"
                             aria-orientation="vertical">
                            <a th:each="chatItem:${chatItemList}" class="nav-link chatItem" th:id="${chatItem.id}"
                               data-toggle="pill" th:href="'#chat-'+${chatItem.getId()}" role="tab"
                               aria-controls="chat-first" aria-selected="true"
                               th:attr="isGroupChat=${chatItem.isGroupChat()}?1:0,messageType=${chatItem.messageType}"
                            >
                                <div class="media active">
                                    <div th:class="'user-status '+${chatItem.online.equals(1)?'':'status-away'}"></div>
                                    <img class="align-self-center rounded-circle" th:src="${chatItem.icon}"
                                         alt="User Image">
                                    <div class="media-body">
                                        <h5>[[${chatItem.name}]]<span class="chat-timing" th:text="${chatItem.dateTime}">02:30 pm</span></h5>
                                        <p th:id="lastMessage-+${chatItem.id}" th:text="${chatItem.lastMessage==null?'':chatItem.lastMessage}">Waiting for module 1 to finish...</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Chat Listbar -->
            <!-- Start Chat Addbar -->
            <div class="tab-pane fade" id="pills-addchat-justified" role="tabpanel"
                 aria-labelledby="pills-addchat-tab-justified">
                <div class="chat-addbar">
                    <div class="chat-left-headbar">
                        <div class="row align-items-center">
                            <div class="col-9">
                                <ul class="list-unstyled mb-0">
                                    <li class="media">
                                        <img class="align-self-center mr-2" src="../static/images/logo.svg"
                                             alt="Generic placeholder image">
                                        <div class="media-body">
                                            <h5 class="mb-0 mt-2">New Chat</h5>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-3">
                                <a href="#" data-toggle="modal" data-target="#createGroup"><i
                                        class="feather icon-users"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="chat-left-search">
                        <form>
                            <div class="input-group">
                                <input type="search" class="form-control" placeholder="Search" aria-label="Search"
                                       aria-describedby="chat-left-search-user-btn">
                                <div class="input-group-append">
                                    <button class="btn" type="submit" id="chat-left-search-user-btn"><i
                                            class="feather icon-search"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="chat-left-body">
                        <!--                            <div  class="nav flex-column nav-pills chat-userlist" id="new-chat-tab" role="tablist" aria-orientation="vertical">-->
                        <!--                                <a class="nav-link active" id="new-chat-first-tab" data-toggle="pill" href="#" role="tab" aria-selected="true">-->
                        <!--                                    <div class="media">-->
                        <!--                                        <img class="align-self-center rounded-circle" src="../static/images/men.svg" alt="User Image">-->
                        <!--                                        <div class="media-body">-->
                        <!--                                            <h5>John Doe</h5>-->
                        <!--                                            <p>Hey there. I am on Chalty.</p>-->
                        <!--                                        </div>-->
                        <!--                                    </div>-->
                        <!--                                </a>-->
                        <!--                            </div>-->
                    </div>
                </div>
            </div>
            <!-- End Chat Addbar -->
            <!-- Start Chat Profilebar -->
            <div class="tab-pane fade" id="pills-profile-justified" role="tabpanel"
                 aria-labelledby="pills-profile-tab-justified">
                <div class="chat-profilebar">
                    <div class="chat-left-headbar">
                        <div class="row align-items-center">
                            <div class="col-12">
                                <ul class="list-unstyled mb-0">
                                    <li class="media">
                                        <img class="align-self-center mr-2" src="../static/images/logo.svg"
                                             alt="Generic placeholder image">
                                        <div class="media-body">
                                            <h5 class="mb-0 mt-2">My Profile</h5>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="chat-left-body">
                        <div class="profilebar">
                            <img class="profile-pic img-fluid" src="../static/images/men.svg" alt="profile-pic">
                            <div class="profile-edit">
                                <i class="feather icon-camera upload-button"></i>
                                <input class="profile-upload" type="file" accept="image/*"/>
                            </div>
                            <h5>Will Patinson</h5>
                            <p class="mb-0">Florida, USA</p>
                        </div>
                        <div class="profile-detail">
                            <ul class="list-unstyled mb-0">
                                <li class="media">
                                    <i class="feather icon-user align-self-center"></i>
                                    <div class="media-body">
                                        <p>Username</p>
                                        <div class="input-group">
                                            <input type="text" class="form-control" value="Will Patinson"
                                                   aria-label="Will Patinson"
                                                   aria-describedby="button-addon-group-username">
                                            <div class="input-group-append">
                                                <button class="btn btn-link" type="button"
                                                        id="button-addon-group-username">Update
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="media">
                                    <i class="feather icon-map align-self-center"></i>
                                    <div class="media-body">
                                        <p>Location</p>
                                        <div class="input-group">
                                            <input type="text" class="form-control" value="Florida, USA"
                                                   aria-label="Florida, USA"
                                                   aria-describedby="button-addon-group-location">
                                            <div class="input-group-append">
                                                <button class="btn btn-link" type="button"
                                                        id="button-addon-group-location">Update
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="media">
                                    <i class="feather icon-message-square align-self-center"></i>
                                    <div class="media-body">
                                        <p>Status</p>
                                        <div class="input-group">
                                            <input type="text" class="form-control" value="I am on Gappa."
                                                   aria-label="I am on Gappa"
                                                   aria-describedby="button-addon-group-status">
                                            <div class="input-group-append">
                                                <button class="btn btn-link" type="button"
                                                        id="button-addon-group-status">Update
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="media">
                                    <i class="feather icon-mail align-self-center"></i>
                                    <div class="media-body">
                                        <p>Email ID</p>
                                        <div class="input-group">
                                            <input type="email" class="form-control" value="demo@example.com"
                                                   aria-label="demo@example.com"
                                                   aria-describedby="button-addon-group-emailid">
                                            <div class="input-group-append">
                                                <button class="btn btn-link" type="button"
                                                        id="button-addon-group-emailid">Update
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="media">
                                    <i class="feather icon-lock align-self-center"></i>
                                    <div class="media-body">
                                        <p>Password</p>
                                        <div class="input-group">
                                            <input type="password" class="form-control" value="********"
                                                   aria-label="********" aria-describedby="button-addon-group-password">
                                            <div class="input-group-append">
                                                <button class="btn btn-link" type="button"
                                                        id="button-addon-group-password">Update
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Chat Profilebar -->
            <!-- Start Chat Settingbar -->
            <div class="tab-pane fade" id="pills-setting-justified" role="tabpanel"
                 aria-labelledby="pills-setting-tab-justified">
                <div class="chat-settingbar">
                    <div class="chat-left-headbar">
                        <div class="row align-items-center">
                            <div class="col-9">
                                <ul class="list-unstyled mb-0">
                                    <li class="media">
                                        <img class="align-self-center mr-2" src="../static/images/logo.svg"
                                             alt="Generic placeholder image">
                                        <div class="media-body">
                                            <h5 class="mb-0 mt-2">Setting</h5>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-3">
                                <div class="dropdown">
                                    <a href="#" id="settingDropdown" data-toggle="dropdown" aria-haspopup="true"
                                       aria-expanded="false"><i class="feather icon-more-vertical-"></i></a>
                                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="settingDropdown">
                                        <a class="dropdown-item font-14" href="#">Reset to Defaults</a>
                                        <a class="dropdown-item font-14" href="#">Backup</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="chat-left-body">
                        <p class="setting-header">General Settings</p>
                        <div class="general-setting">
                            <div class="row align-items-center pb-3">
                                <div class="col-9"><h6 class="mb-0">Notification Sounds</h6></div>
                                <div class="col-3 text-right">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="notificationSound"
                                               checked>
                                        <label class="custom-control-label" for="notificationSound"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="row align-items-center pb-3">
                                <div class="col-9"><h6 class="mb-0">New Message Alerts</h6></div>
                                <div class="col-3 text-right">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="newMessageAlerts">
                                        <label class="custom-control-label" for="newMessageAlerts"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="row align-items-center pb-3">
                                <div class="col-9"><h6 class="mb-0">Show Mini Messages in Sidebar</h6></div>
                                <div class="col-3 text-right">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="showMiniMessages">
                                        <label class="custom-control-label" for="showMiniMessages"></label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <p class="setting-header">Privacy Settings</p>
                        <div class="privacy-setting">
                            <div class="row align-items-center pb-3">
                                <div class="col-9"><h6 class="mb-0">Read Receipts</h6></div>
                                <div class="col-3 text-right">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input" id="readReceipts" checked>
                                        <label class="custom-control-label" for="readReceipts"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="row align-items-center pb-3">
                                <div class="col-9"><h6 class="mb-0">Show Profile Picture</h6></div>
                                <div class="col-3 text-right">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input" id="showProfilePicture">
                                        <label class="custom-control-label" for="showProfilePicture"></label>
                                    </div>
                                </div>
                            </div>
                            <div class="row align-items-center pb-3">
                                <div class="col-9"><h6 class="mb-0">Allow Messages from Strangers</h6></div>
                                <div class="col-3 text-right">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input"
                                               id="allowMessageToStrangers">
                                        <label class="custom-control-label" for="allowMessageToStrangers"></label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <p class="setting-header">Design Settings</p>
                        <div class="design-setting custom-checkbox-button">
                            <div class="form-check-inline checkbox-primary">
                                <input type="checkbox" id="customCheckboxInline5" name="customCheckboxInline2" checked>
                                <label for="customCheckboxInline5"></label>
                            </div>
                            <div class="form-check-inline checkbox-secondary">
                                <input type="checkbox" id="customCheckboxInline6" name="customCheckboxInline2">
                                <label for="customCheckboxInline6"></label>
                            </div>
                            <div class="form-check-inline checkbox-success">
                                <input type="checkbox" id="customCheckboxInline7" name="customCheckboxInline2">
                                <label for="customCheckboxInline7"></label>
                            </div>
                            <div class="form-check-inline checkbox-danger">
                                <input type="checkbox" id="customCheckboxInline8" name="customCheckboxInline2">
                                <label for="customCheckboxInline8"></label>
                            </div>
                            <div class="form-check-inline checkbox-warning">
                                <input type="checkbox" id="customCheckboxInline9" name="customCheckboxInline2">
                                <label for="customCheckboxInline9"></label>
                            </div>
                            <div class="form-check-inline checkbox-info">
                                <input type="checkbox" id="customCheckboxInline10" name="customCheckboxInline2">
                                <label for="customCheckboxInline10"></label>
                            </div>
                            <div class="form-check-inline checkbox-light">
                                <input type="checkbox" id="customCheckboxInline11" name="customCheckboxInline2">
                                <label for="customCheckboxInline11"></label>
                            </div>
                            <div class="form-check-inline checkbox-dark">
                                <input type="checkbox" id="customCheckboxInline12" name="customCheckboxInline2">
                                <label for="customCheckboxInline12"></label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Chat Settingbar -->
        </div>
        <div class="chat-menu">
            <ul class="nav nav-pills nav-justified mb-0" id="pills-tab-justified" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="pills-chat-tab-justified" data-toggle="pill"
                       href="#pills-chat-justified" role="tab" aria-controls="pills-chat-justified"
                       aria-selected="true"><i class="feather icon-message-circle"></i></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="pills-addchat-tab-justified" data-toggle="pill"
                       href="#pills-addchat-justified" role="tab" aria-controls="pills-addchat-justified"
                       aria-selected="false"><i class="feather icon-edit-1"></i></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="pills-profile-tab-justified" data-toggle="pill"
                       href="#pills-profile-justified" role="tab" aria-controls="pills-profile-justified"
                       aria-selected="false"><i class="feather icon-user"></i></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="pills-setting-tab-justified" data-toggle="pill"
                       href="#pills-setting-justified" role="tab" aria-controls="pills-setting-justified"
                       aria-selected="false"><i class="feather icon-settings"></i></a>
                </li>
            </ul>
        </div>
    </div>
    <!-- End Chat Leftbar -->
    <!-- Start Chat Rightbar -->
    <div class="chat-rightbar">
        <!-- Start Chat Detail -->
        <div class="chat-detail">
            <div class="chat-head">
                <div class="row align-items-center">
                    <div class="col-6">
                        <ul class="list-unstyled mb-0">
                            <li class="media">
                                <div class="user-status"></div>
                                <img class="align-self-center rounded-circle" th:src="${userInfo.getIcon()}"
                                     alt="Generic placeholder image">
                                <div class="media-body">
                                    <h5 th:text="${userInfo.getUsername()}">Emily Cook</h5>
                                    <p class="mb-0">Online</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="col-6">
                        <ul class="list-inline float-right mb-0">
                            <li class="list-inline-item">
                                <a href="#" data-toggle="modal" data-target="#incomingVoiceCall"><i
                                        class="feather icon-phone"></i></a>
                            </li>
                            <li class="list-inline-item">
                                <a href="#" data-toggle="modal" data-target="#incomingVideoCall"><i
                                        class="feather icon-video"></i></a>
                            </li>
                            <li class="list-inline-item">
                                <div class="dropdown">
                                    <a href="#" class="" id="chatDropdown" data-toggle="dropdown" aria-haspopup="true"
                                       aria-expanded="false"><i class="feather icon-more-vertical-"></i></a>
                                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="chatDropdown">
                                        <a class="dropdown-item font-14" href="#" id="view-user-info">View User Info</a>
                                        <a class="dropdown-item font-14" href="#" onclick="disbandGroupChat()">Disband Group Chat</a>
<!--                                        <a class="dropdown-item font-14" href="#">Archive</a>-->
<!--                                        <a class="dropdown-item font-14" href="#">Mute</a>-->
<!--                                        <a class="dropdown-item font-14" href="#">Export Chat</a>-->
<!--                                        <a class="dropdown-item font-14" href="#">Clear Message</a>-->
                                    </div>
                                </div>
                            </li>
                            <li class="list-inline-item">
                                <a href="#" class="back-arrow"><i class="feather icon-x"></i></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="chat-body">
                <div class="tab-content" id="chat-listContent">
                    <div th:each="chatItem:${chatItemList}" class="tab-pane fade" th:id="'chat-'+${chatItem.getId()}"
                         role="tabpanel" aria-labelledby="chat-first-tab">
                        <div class="chat-day text-center mb-3">
                            <span class="badge badge-secondary-inverse">Today</span>
                        </div>
                        <div th:each="chatRecord:${chatItem.chatRecord}">
                            <div th:if="${chatRecord.messageType==0}" class="chat-day text-center mb-3">
                                <span class="badge badge-secondary-inverse" th:text="${chatRecord.info}">Today</span>
                            </div>
                            <div th:if="${chatRecord.messageType!=0}" th:class="'chat-message chat-message-'+${chatRecord.send.equals(userInfo.getId())?'right':'left'}" >
                                <div class="chat-message-text">
                                    <span th:text="${chatRecord.info}"></span>
                                </div>
                                <div class="chat-message-meta">
                                    <span th:text="${chatRecord.send.equals(userInfo.getId())?'me ':chatRecord.sendName+' '}">me<i class="feather icon-check ml-2"></i></span>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="chat-bottom">
                <div class="chat-messagebar">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <a href="#" id="button-addonmic"><i class="feather icon-mic"></i></a>
                            </div>
                            <input id="sendMessage"  type="text" class="form-control"
                                   placeholder="Type a message..." aria-label="Text">
                            <div class="input-group-append">
                                <a href="#" class="mr-3" id="button-addonlink"><i
                                        class="feather icon-paperclip"></i></a>
                                <a href="#" id="button-addonsend" onclick="sendMsg()"><i class="feather icon-send"></i></a>
                            </div>
                        </div>
                </div>
            </div>
        </div>
        <!-- End Chat Detail -->
        <!-- Start Chat User Info -->
        <div class="chat-user-info">
            <div class="chat-user-head">
                <div class="row align-items-center">
                    <div class="col-9">
                        <h5>User Info</h5>
                    </div>
                    <div class="col-3">
                        <ul class="list-inline float-right mb-0">
                            <li class="list-inline-item">
                                <a href="#" id="close-user-info"><i class="feather icon-x"></i></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="chat-user-body">
                <div class="userbar">
                    <img class="user-pic img-fluid" src="../static/images/girl.svg" alt="user-pic">
                    <h5>Emily Cook</h5>
                    <p class="mb-0">New York, USA</p>
                </div>
                <div class="user-detail">
                    <p class="user-detail-header">About</p>
                    <div class="user-about">
                        <h6><i class="feather icon-heart mr-2"></i>Feeling good today.</h6>
                        <h6 class="my-3"><i class="feather icon-mail mr-2"></i>demo@example.com</h6>
                        <h6 class="mb-0"><i class="feather icon-phone-call mr-2"></i>+1 9876543210</h6>
                    </div>
                    <p class="user-detail-header">Social Profile</p>
                    <div class="user-social">
                        <ul class="list-inline mb-0">
                            <li class="list-inline-item">
                                <a href="#" class="facebook"><i class="feather icon-facebook"></i></a>
                            </li>
                            <li class="list-inline-item">
                                <a href="#" class="twitter"><i class="feather icon-twitter"></i></a>
                            </li>
                            <li class="list-inline-item">
                                <a href="#" class="instagram"><i class="feather icon-instagram"></i></a>
                            </li>
                        </ul>
                    </div>
                    <p class="user-detail-header">Media</p>
                    <div class="user-media">
                        <div class="user-media-slider">
                            <div class="user-media-slider-item">
                                <img src="../static/images/media_01.png" class="" alt="user-media">
                            </div>
                            <div class="user-media-slider-item">
                                <img src="../static/images/media_02.png" class="" alt="user-media">
                            </div>
                            <div class="user-media-slider-item">
                                <img src="../static/images/media_03.png" class="" alt="user-media">
                            </div>
                            <div class="user-media-slider-item">
                                <img src="../static/images/media_04.png" class="" alt="user-media">
                            </div>
                            <div class="user-media-slider-item">
                                <img src="../static/images/pdf.svg" class="" alt="user-media">
                            </div>
                            <div class="user-media-slider-item">
                                <img src="../static/images/xls.svg" class="" alt="user-media">
                            </div>
                            <div class="user-media-slider-item">
                                <img src="../static/images/doc.svg" class="" alt="user-media">
                            </div>
                        </div>
                    </div>
                    <p class="user-detail-header">Settings</p>
                    <div class="user-setting">
                        <div class="row align-items-center pb-3">
                            <div class="col-9"><h6 class="mb-0">Mute Notifications</h6></div>
                            <div class="col-3 text-right">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="muteNotification" checked>
                                    <label class="custom-control-label" for="muteNotification"></label>
                                </div>
                            </div>
                        </div>
                        <div class="row align-items-center pb-3">
                            <div class="col-9"><h6 class="mb-0">Block Contact</h6></div>
                            <div class="col-3 text-right">
                                <div class="custom-control custom-switch">
                                    <input type="checkbox" class="custom-control-input" id="blockContact">
                                    <label class="custom-control-label" for="blockContact"></label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Chat User Info -->
    </div>
    <!-- End Chat Rightbar -->
</div>
<!-- End Chat Layout -->
<!-- Start js -->
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/popper.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/modernizr.min.js"></script>
<script src="../static/js/detect.js"></script>
<script src="../static/js/jquery.slimscroll.js"></script>
<script src="../static/js/vertical-menu.js"></script>
<!-- Slick js -->
<script src="../static/plugins/slick/slick.min.js"></script>
<!-- Core js -->
<script src="../static/js/core.js"></script>
<script th:inline="javascript">
    var websocket = null;
    //判断当前浏览器是否支持 webSocket
    if (window.WebSocket) {
        websocket = new WebSocket("ws://localhost:9001/ws");
        websocket.onopen = function (ev) {
            //一旦连接建立成功，发送一条初始信息，表名自己的身份，由服务器记录下
            const send = {
                send: [[${userInfo.id}]],
                info: [[${userInfo.username}]]+"上线了！",
                messageType: 0,
                channelId: "globleChat"
            }
            websocket.send(JSON.stringify(send));
            console.log("建立连接");
        }
        websocket.onclose = function (ev) {
            console.log("断开连接");
        }
        websocket.onmessage = function (ev) {
            console.log("接收到服务器的消息" + ev.data);
            let obj = JSON.parse(ev.data)
            let info = obj.info;
            let chatItemId
            if (obj.messageType!==1){
                chatItemId = obj.channelId;
            }else{
                chatItemId = obj.send;
            }
            let chatBoxId = 'chat-' + chatItemId;
            if (obj.messageType===0){
                $('#' + chatBoxId).append(`
                         <div class="chat-day text-center mb-3">
                            <span class="badge badge-secondary-inverse">`+info+`</span>
                        </div>`
                )
            }else {
                $('#' + chatBoxId).append(`
                            <div class="chat-message chat-message-left">
                                <div class="chat-message-text">
                                    <span>` + info + `</span>
                                </div>
                                <div class="chat-message-meta">
                                    <span>`+obj.sendName+`<i class="feather icon-check ml-2"></i></span>
                                </div>
                            </div>`
                )
            }
            //刷新显示的最后一条消息 对方
            $("#lastMessage-"+chatItemId).text(obj.info)
        }
        window.onbeforeunload = function () {
            if (websocket != null) {
                websocket.close();
            }
        };
    } else {
        alert("当前浏览器不支持 webSocket")
    }

    function sendMsg() {
        let chatItem = $('.chatItem.active')
        let info = $('#sendMessage').val()
        if (chatItem.length !== 0 && info.length!==0) {
            console.log(chatItem)
            let chatItemId = chatItem.attr("id")
            let chatBoxId = 'chat-' + chatItemId;
            $('#' + chatBoxId).append(`
                            <div class="chat-message chat-message-right">
                                <div class="chat-message-text">
                                    <span>` + info + `</span>
                                </div>
                                <div class="chat-message-meta">
                                    <span>me<i class="feather icon-check ml-2"></i></span>
                                </div>
                            </div>`
            )
            $('#sendMessage').val('')
            let messageType = chatItem.attr("messageType")
            //刷新显示的最后一条消息
            $("#lastMessage-"+chatItemId).text(info)
            if (messageType!=="1"){
                chatItemId=''
            }
            const send = {
                send: [[${userInfo.id}]],
                receive: chatItemId,
                channelId: chatItem.attr("id"),
                info: info,
                messageType: messageType,
            }
            websocket.send(JSON.stringify(send));
            console.log(JSON.stringify(send))
        }
    }

    $("#sendMessage").keyup(function(event){
        if(event.keyCode ==13){
            sendMsg()
            return false;
        }
    });
    let checkedIds = new Set()

    function clickCheckBox(e) {
        let checkId = $(e).attr("checkId")
        let isChecked =  Boolean(parseInt($(e).attr("isChecked")))
        if (!isChecked){
            checkedIds.add(checkId)
            $('#avatar-plus').before(`
                <div class="avatar" id="avatar-`+checkId+`">
                    <a href="#" data-toggle="tooltip" data-placement="top" title=""
                       data-original-title="`+$(e).attr("username")+`">
                        <img src="`+$(e).attr("icon")+`" alt="avatar" class="rounded-circle">
                    </a>
                </div>
            `)
        }else {
            checkedIds.delete(checkId)
            $('#avatar-'+checkId).remove()
        }
        $(e).attr("isChecked",isChecked===true?0:1)
        console.log(checkedIds)
    }

    function createGroup() {
        checkedIds.add([[${userInfo.id}]])
        const array = Array.from(checkedIds)
        let groupName= $("#groupName").val()
        let groupDesc= $("#groupDesc").val()
        console.log(array)
        const createGroupRequest={
            userInfo:[[${userInfo}]],
            groupName:groupName,
            groupDesc:groupDesc,
            memberIds:array,
        }
        let data = JSON.stringify(createGroupRequest)
        console.log(data)
        $.ajax({
            type: "post",
            url: "/createGroup",
            data: data,
            dataType: "text",
            contentType: "application/json",
            success: function(data){
                location.href = "http://localhost:9000/toChat"
            },
            error:function(error){

            }
        });
    }

    function disbandGroupChat(){
        let chatItem = $('.chatItem.active')
        let isGroupChat = chatItem.attr("isGroupChat")
        if (isGroupChat==="1"){
            let channelId = chatItem.attr("id")
            location.href = "http://localhost:9000/disbandGroupChat?channelId="+channelId+"&sendId="+[[${userInfo.id}]]
        }
    }
</script>
<!-- End js -->
</body>
</html>